<template>
  <vue-draggable-resizable
    :grid="[2,2]"
    class="drag-item"
    :isLock="componentFrontAttr[item.id].isLock"
    :lock-aspect-ratio="item.cid == COMPONENT_TYPES.wb_img ? true : false"
    :active="item.active"
    @dragging="onDrag"
    @resizing="onResize"
    @activated="onActivated"
    @deactivated="onDeactivated"
    :onDragStart="onDragStartCallback"
    :w="item.conAttr.width"
    :h="item.conAttr.height"
    :x="oddChangeEven(item.conAttr.left)"
    :y="oddChangeEven(item.conAttr.top)"
    :min-height="10"
    :min-width="10"
    :z="item.conAttr.zIndex"
    :class="{isHiddenComp: componentFrontAttr[item.id].isHidden}">
      <component :is="item.type" :item="item" :pageId="getPageId" :popId="getPopId" ref="comp"></component>
      <div class="mask" ref="mask" v-if="state.isMask"
      @dblclick.stop.prevent="onIsEdit"
      @click.right.prevent.exact="onRight"
      @click.stop.prevent></div>
    </vue-draggable-resizable>
</template>


<script setup lang="ts">
import { getPxOVwByValue } from '@/utils'
import { useWebPageStore } from '@/store/web/page'
import { useWebSiteStore } from '@/store/web/site'
import { COMPONENT_TYPES } from '@/const/'
import { useWebComponentStore } from '@/store/web/component'

const props = defineProps<{ 
  item: IComponent,
}>()

const state = reactive({
  isMask: true,
})
const state_ = {
  width: 0,
  height: 0,
  x: 0,
  y: 0,
}

const useWebPage = useWebPageStore()
const useWebSite = useWebSiteStore()
const useWebComponent = useWebComponentStore()

const getPageId = computed(() => {
  return (useWebPage.pageIndex+1)
})
const getPopId = computed(() => {
  return (useWebPage.popIndex+1)
})

const componentFrontAttr = computed(() => {
  return useWebPage.componentFrontAttr
})
const shiftComponents = computed(() => {
  return useWebSite.siteStatus.shiftComponents 
})

const oddChangeEven = (value: number) => {
  if(value % 2 == 0) {
    return value
  } else {
    return value + 1
  }
}
const onRight = () => {
  const conAttr = props.item.conAttr
  const top = getPxOVwByValue(conAttr.top + conAttr.height/2)
  const left = getPxOVwByValue(conAttr.left + conAttr.width)
  useWebComponent.setRightMenuStatus( { isVisible: true, left, top  } )
}
const onResize = (x: number, y: number, width: number, height: number) => {
  state_.x = x
  state_.y = y
  state_.width = width
  state_.height = height
  useWebComponent.changeWH({width, height})
}
const onDrag = (x: number, y: number) => {
  const shiftComponents = useWebSite.siteStatus.shiftComponents 
  if(shiftComponents.length > 0) {
    useWebSite.clearShiftComponents()
    useWebComponent.setActiveComponentId(props.item.id)
  }
  state_.x = x
  state_.y = y
  useWebComponent.recordMousePosition({ left: x, top: y })
}
const onActivated = () => {
  useWebComponent.setActiveComponentId(props.item.id)
}
const onDeactivated = () => {
  useWebComponent.setActiveComponentId()
  useWebSite.setIsEdit(false)
  state.isMask = true
}
const onIsEdit = () => {
  if(props.item.cid == COMPONENT_TYPES.wb_text) {
    state.isMask = false
    useWebSite.setIsEdit(true)
  }
}
const onDragStartCallback = () => {
}
</script>


<script lang="ts">
const components = {
  VueDraggableResizable: defineAsyncComponent(() => import('@/views/components/vue-draggable-resizable.vue')),
  GroupCarousel: defineAsyncComponent(() => import('@/components/lists/group-carousel.vue')),
  WbCommonList: defineAsyncComponent(() => import('@/components/lists/wb-common-list.vue')),
  WbIsPostEvent: defineAsyncComponent(() => import('@/components/global/wb-is-post-event.vue')),
  GroupComponent: defineAsyncComponent(() => import('@/components/global/group-component.vue')),
  WbImg: defineAsyncComponent(() => import('@/components/common/wb-img.vue')),
  WbBg: defineAsyncComponent(() => import('@/components/common/wb-bg.vue')),
  WbText: defineAsyncComponent(() => import('@/components/common/wb-text.vue')),
  WbTimer: defineAsyncComponent(() => import('@/components/common/wb-timer.vue')),
  WbProcess: defineAsyncComponent(() => import('@/components/common/wb-process.vue')),
  WbVideo: defineAsyncComponent(() => import('@/components/common/wb-video.vue')),  
  WbScrollContainer: defineAsyncComponent(() => import('@/components/common/wb-scroll-container.vue')),  
  WbMenu: defineAsyncComponent(() => import('@/components/common/wb-menu.vue')),
  WbMoveable: defineAsyncComponent(() => import('@/components/common/wb-moveable.vue')),
  WbCamera: defineAsyncComponent(() => import('@/components/common/wb-camera.vue')),
  WbImgs: defineAsyncComponent(() => import('@/components/common/wb-imgs.vue')),
  WbCalendar: defineAsyncComponent(() => import('@/components/common/wb-calendar.vue')),
  WbAudio: defineAsyncComponent(() => import('@/components/common/wb-audio.vue')),
  WbSlotMachine: defineAsyncComponent(() => import('@/components/common/wb-slot-machine.vue')),
  WbTurnBook: defineAsyncComponent(() => import('@/components/common/wb-turn-book.vue')),
  WbSvgIcon: defineAsyncComponent(() => import('@/components/common/wb-svg-icon.vue')),
  WbInput: defineAsyncComponent(() => import('@/components/form/wb-input.vue')),  
  WbBtn: defineAsyncComponent(() => import('@/components/form/wb-btn.vue')),
  WbAddress: defineAsyncComponent(() => import('@/components/form/wb-address.vue')),
  WbCheckbox: defineAsyncComponent(() => import('@/components/form/wb-checkbox.vue')),
  WbDropdown: defineAsyncComponent(() => import('@/components/form/wb-dropdown.vue')),
  WbRadio: defineAsyncComponent(() => import('@/components/form/wb-radio.vue')),
  WbUpload: defineAsyncComponent(() => import('@/components/form/wb-upload.vue')),
  WbMc: defineAsyncComponent(() => import('@/components/games/createjs/wb-mc.vue')),
  WbPixis: defineAsyncComponent(() => import('@/components/games/pixijs/wb-pixis.vue')),
  WbPaper: defineAsyncComponent(() => import('@/components/games/paperjs/wb-paper.vue')),
}

export default defineComponent({
  components,
})
</script>

<style lang="scss">
.isHiddenComp{
  display: none;
}
.drag-item {
  // position: relative;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-color: black;
    opacity: 0.02;
    z-index: 50;
  }
}
</style>
